import {DefineComponent, defineComponent, provide, ref, VNodeChild,} from "vue"
import {NDropdown, NAvatar, DropdownOption,} from "naive-ui"
import {useRouter, useRoute,} from "vue-router"
import Openfile from "@/views/kedao/openfile";

export default defineComponent({
    name: "kedao",
    setup() {
        const router = useRouter()
        const route = useRoute()
        const menuIndex = ref(1)
        // 背景图片
        const bgimg = ref("http://101.43.194.47:88/static/images/wall_page/6.jpg")
        // 主题颜色
        const bgcolor = ref("rgba(36, 116, 181, 1)")
        // 点击左侧菜单
        const handleClick = (index: number) => {
            switch (index) {
                case 1:
                    menuIndex.value = index
                    router.push({name: "Desktop"})
                    break;
                case 2:
                    menuIndex.value = index
                    router.push({name: "Filemanager"})
                    break;
                case 3:
                    menuIndex.value = index
                    router.push({name: "Setting"})
                    break;
                case 4:
                    menuIndex.value = index
                    router.push({name: "Workflat"})
                    break;
                default:
                    menuIndex.value = 1
                    router.push({name: "Desktop"})
                    break;
            }
        }
        // 头像菜单列表
        const options = ref([
            {label: "个人中心", key: "usercenter",},
            {label: "文件管理", key: "filemanager",},
            {label: "插件管理", key: "chajianmanager",},
            {label: "语言选择", key: "changlanguage",},
            {label: "主题选择", key: "changetheme",},
            {label: "关于", key: "about",},
            {label: "注销", key: "zhuxiao",},
        ])
        // 头像菜单点击事件
        const handleSelect = (key: string) => {
            console.log("点击key：", key)
        }
        // 文件操作菜单
        const openfileref = ref<null | DefineComponent>(null)
        const showOrCreatefile = (id: string) => {
            console.log("要展示的文件id：",id)
            if(id){
                // 理论上应该从后端获取数据
                openfileref.value?.handleInit("edit",{"text":"1321316846516341984856"})
            }else{
                openfileref.value?.handleInit("add")
            }
        }
        // 将方法注入到所有子组件内
        provide("showOrCreatefile", showOrCreatefile)
        return () => (
            <div class="w-screen h-screen relative">
                <div class="absolute inset-0 -z-200 bg-cover" style={{"background-image": `url(${bgimg.value})`}}/>
                {/* 显示背景图片还是主题颜色 */}
                {/* {route.name==="Desktop" ? <div class="absolute inset-0 -z-200 bg-cover" style={{ "background-image": `url(${bgimg.value})` }}></div> : <div class="absolute inset-0 -z-200 bg-cover" style={{ "background-color": `${bgcolor.value}` }}></div>} */}
                <div
                    class={["absolute left-0 top-0 bottom-0 w-70px flex flex-col justify-between items-center text-white ", route.name === "Desktop" ? "bg-black bg-opacity-20" : "bg-niluolan bg-opacity-100"]}>
                    <div class="w-full flex flex-col items-center">
                        <div class={["w-70px h-70px juzhong1  cursor-pointer hover:(bg-white bg-opacity-50)"]}
                             onClick={() => handleClick(0)}>
                            <span>可道云</span>
                        </div>
                        <div
                            class={["w-60px h-60px m-5px  juzhong1 rounded-xl cursor-pointer hover:(bg-white bg-opacity-50)", menuIndex.value === 1 ? "bg-white bg-opacity-50" : ""]}
                            onClick={() => handleClick(1)}>
                            <span>桌面</span>
                        </div>
                        <div
                            class={["w-60px h-60px m-5px  juzhong1 rounded-xl cursor-pointer hover:(bg-white bg-opacity-50)", menuIndex.value === 2 ? "bg-white bg-opacity-50" : ""]}
                            onClick={() => handleClick(2)}>
                            <span>文件管理</span>
                        </div>
                        <div
                            class={["w-60px h-60px m-5px  juzhong1 rounded-xl cursor-pointer hover:(bg-white bg-opacity-50)", menuIndex.value === 3 ? "bg-white bg-opacity-50" : ""]}
                            onClick={() => handleClick(3)}>
                            <span>设置</span>
                        </div>
                        <div
                            class={["w-60px h-60px m-5px  juzhong1 rounded-xl cursor-pointer hover:(bg-white bg-opacity-50)", menuIndex.value === 4 ? "bg-white bg-opacity-50" : ""]}
                            onClick={() => handleClick(4)}>
                            <span>去别去看看</span>
                        </div>
                    </div>
                    <div class="w-full">
                        <div class={["w-60px h-60px m-5px  juzhong1 rounded-xl cursor-pointer"]}>
                            <NDropdown
                                trigger={"click"}
                                placement={"right-end"}
                                options={options.value}
                                onSelect={handleSelect}
                            >
                                <NAvatar
                                    round
                                    size={60}
                                    src={"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"}
                                >
                                </NAvatar>
                            </NDropdown>
                        </div>
                    </div>
                </div>
                <div
                    class="absolute left-70px top-0 right-0 bottom-0 overflow-x-hidden overflow-y-auto bg-light-50 bg-opacity-0">
                    <router-view/>
                </div>
                <Openfile ref={openfileref}/>
            </div>
        )
    },
})
